<template>
  <el-row v-if="editMode != 'autocad'">
    <el-col :span="8">
      <div id="statusbar"></div>
    </el-col>
    <el-col :span="12">
      <div></div>
    </el-col>
    <el-col :span="4">
      <div class="scale_slider">
        <el-slider v-model="scaleValue" :max="400" :min="10" :step="10" show-input @change="onChange" />
      </div>
    </el-col>
  </el-row>
</template>
    
<script setup>
import { ref, onMounted, onUpdated } from 'vue'

const scaleValue = ref(100)
const editMode = ref("autocad")

var onChange = function (val) {
  console.log("scale changed**********************************");
  console.log(val);
  let scale = parseFloat(scaleValue.value)/100;
  window.mainctl.m_dynamicINTF.setScale(scale);
}

onMounted(() => {

})


defineExpose({
});
</script>

<style scoped>
.scale_slider {
  display: flex;
  align-items: center;
}

.scale_slider.el-slider {
  margin-top: 0;
  margin-left: 12px;
}
</style>
    